﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Options</title>
    <link href="chrome-native-look.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        // This could easily be written without
        // jQuery if you are not using it.
        
        $(document).ready(function() {
            var tabLinks = $(".tabs li a");

            tabLinks.click(function(e) {
                e.preventDefault();
                tabLinks.removeClass('active');
                $(this).addClass('active');
                $(".content:visible").hide();
                $("#" + $(this).parent().attr('class')).show();
            });
        });
                
        function setPublicCal(bool)
        {            
            var text = document.getElementById('publicCalText');
            text.disabled = bool;
        }
        
        function checkPublicCal()
        {
            var radio = document.getElementById('publicCalSel');
            setPublicCal(!radio.checked);
        }

        function loadData()
        {
            console.log("initialize");
            var opts = document.getElementsByTagName('input');
            var port = chrome.extension.connect( {name: "OptionPage"} );
            port.onMessage.addListener( function(obj) 
            {
                var settings = obj.values;
                for( var i = 0; i < settings.length; ++i )
                {
                    var el_id = settings[i].name;
                    var el = document.getElementById(el_id);
                    var val = settings[i].value;

                    if ( el != undefined )
                    {
                        if ( el.type == 'checkbox' )
                        {
                            el.checked = val == 'true' ? true : false;
                        }
                        else if ( el.type == 'radio' )
                        {
                            el.checked = val == 'true' ? true : false;
                        }
                        else
                        {
                            el.value = val;
                        }
                    }
                    
                    el_id = null;
                    el = null;
                    val = null;
                }
                
                checkPublicCal();
                port.disconnect();  
                
                port = null;
                settings = null;
                obj.values = null;
                obj = null;
            });
            
            var ids = [];
            for ( var j = 0; j < opts.length; ++j )
            {
                ids[j] = opts[j].id;
            }
            
            port.postMessage({message: "WantOptions!", values: ids});
            
            ids = null;
            opts = null;
        }        
        
        function saveData()
        {
            var port = chrome.extension.connect( {name: "OptionPage"} );            
            var settings = [];
            var opts = document.getElementsByTagName('input');
            
            for ( var i = 0; i < opts.length; ++i )
            {
                if ( opts[i].type == 'checkbox' )
                {
                    settings[settings.length] = { name: opts[i].id, value: opts[i].checked ? true : false } ;
                }
                else if ( opts[i].type == 'radio' ) 
                {
                    settings[settings.length] = { name: opts[i].id, value: opts[i].value == 'on' ? true : false } ;
                }
                else if ( opts[i].type == 'text' )
                {
                    settings[settings.length] = { name: opts[i].id, value: opts[i].value } ;
                }
            }
            port.postMessage({message: "OptionsSaved!", values: settings});
            port.disconnect();  
            
            settings = null;
            opts = null;
        }
        
        function onClose()
        {
            saveData();
            window.close();
        }              
        
    </script>
</head>
<body onload="loadData();">
    <ul class="tabs">
        <li class="basics"><a href="" class="active"><span>Basics</span></a></li>
    </ul>

    <div id="basics" class="content">
        <div> <!-- This 'div' element is only a wrapper to make it more readable -->
            <div class="fleft section">
                <label class="section-title">I want to view:</label>
            </div>
            
            <div class="fleft">
                <label class="block field">
                    <input onchange="setPublicCal(true);" checked="true" type="radio" name="wantToView" id="privateCalSel" />
                    My Private Calendar
                </label>
                               
                <label class="block field">
                    <input onchange="setPublicCal(false);" type="radio" name="wantToView" id="publicCalSel"/>
                    A Public Calendar:
                    <input style="width: 150px; margin: 7px;" disabled="disabled" type="text" name="publicCalText" id="publicCalText" width="100" value="Type here..." />                  
                </label>                
            </div>
            
            <div class="clear"></div>
            <hr />
        </div>
        
        <div>
            <div class="fleft section">
                <label class="section-title">I want to tweak:</label>
            </div>
            
            <div class="fleft">
                <label class="block field">
                    Fetch interval (seconds):
                    <input style="width: 150px; align: right;" name="fetchInterv" id="fetchInterv" type="text" value="30" />                
                </label>                                               
            </div>
            
            <div class="fright">
                    <label class="red block field">Warning. Low ( < 5 ) values can impact performance.</label>
            </div>
            <br/>
                      
            <div class="clear"></div>
            
            <button class="fright" onclick="saveData();">Fetch Now</button>
            <hr />
        </div>
    </div>    
    <button class="fright" onclick="onClose();">Close</button>
</body>
</html>
